<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <script src="./swiper-bundle.min.js"></script>
</head>
<style>
    .swiper {
        width: 600px;
        height: 300px;
    }
</style>

<body>

    <!-- <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>

        如果需要分页器
        <div class="swiper-pagination"></div>

        如果需要导航按钮
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        如果需要滚动条
        <div class="swiper-scrollbar"></div>
    </div> -->



    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">slider1</div>
            <div class="swiper-slide">slider2</div>
            <div class="swiper-slide">slider3</div>
        </div>
    </div>
</body>
<script>

    // var mySwiper = new Swiper('.swiper', {
    //     direction: 'vertical',  //垂直切换选项
    //     loop: true, //循环模式选项

    //     // 如果需要分页器
    //     pagination: {
    //         el: '.swiper-pagination',
    //     },

    //     // 如果需要前进后退按钮
    //     navigation: {
    //         nextEl: '.swiper-button-next',
    //         prevEl: '.swiper-button-prev',
    //     },

    //     // 如果需要滚动条
    //     scrollbar: {
    //         el: '.swiper-scrollbar',
    //     },
    // })



    var mySwiper = new Swiper('.swiper', {
        autoplay: true,//可选选项，自动滑动
    })

    //如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
    new Swiper('.swiper')
    var mySwiper = document.querySelector('.swiper').swiper
    mySwiper.slideNext();

</script>

</html>